<ng-container *ngIf="tagData.data.cssType!==undefined; else tabBarLocationTemplate">
  <div class="topSlideBox 1">
    <ion-segment #slideSegment (ionChange)="segmentChanged($event)" [(ngModel)]="selectedSegment" [scrollable]="true">
      <ion-segment-button *ngFor="let item of tagData.data.tabs;let i=index;" [value]="i">
        <span *ngIf="item.value" [ngStyle]="item?.normalValueCssStyle|styleFilter">{{item.value}}</span>
        <div class="bar"></div>
      </ion-segment-button>
    </ion-segment>
    <div class="arrowBox">
      <img [src]="tagData.data.downArrowIcon" class="arrowIcon"
        onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1651123827476faa29d94e7aedbb3b22cde44fb52a3af.png'"
        [ngStyle]="tagData.data.downArrowIconCssStyle|styleFilter" appDebounceClick (debounceClick)="downArrowClick()" />
    </div>
  </div>
  <div class="bottomSlideBox">
    <div class="topButton">
      <span class="typeTitle" [ngStyle]="tagData.data.typeTitle|styleFilter">全部10个分类</span>
      <img [src]="tagData.data.upArrowIcon" class="upIcon"
        onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1651135098448b20e906b9cc824d27ea3050eac3f576d.png'"
        [ngStyle]="tagData.data.upArrowIconCssStyle|styleFilter" appDebounceClick (debounceClick)="upArrowClick()" />
    </div>
    <div class="bottomOutBox" [ngStyle]="tagData.data?.bottomOutBoxCssStyle|styleFilter">
      <div class="bottomBox">
        <ng-container *ngFor="let item of tagData.data.tabs;let i=index;">
          <span class="bottomBoxBtnNormal" *ngIf="item.value" appDebounceClick (debounceClick)="gotoAnchor(i)"
            [ngStyle]="tagData.data?.bottomBoxBtnNormalCssStyle|styleFilter"
            [ngClass]="{'btnCheck': selectedSegment===i}">{{item.value}}</span>
        </ng-container>
      </div>
    </div>
  </div>
</ng-container>
<ng-template #tabBarLocationTemplate>
  <ng-container *ngIf="tagData.data.cssStyle!==undefined;else cssStyleElseTemplate">
    <div class="topSlideBox 2">
      <ion-segment #slideSegment (ionChange)="segmentChanged($event)" [(ngModel)]="selectedSegment" [scrollable]="true">
        <ion-segment-button *ngFor="let item of tagData.data.tabs;let i=index;" [value]="i">
          <span *ngIf="item.value" class="newFontStyle"
            [ngStyle]="item?.normalValueCssStyle|styleFilter">{{item.value}}</span>
          <div class="bar"></div>
        </ion-segment-button>
      </ion-segment>
    </div>
  </ng-container>
  <ng-template #cssStyleElseTemplate>
    <div id='tabBarLocation' [ngClass]="{'hideTab': tagData.data.isHide==='1'}" class="tabBarLocation"
      [ngStyle]="tabBarLocationBoxCssStyle|styleFilter">
      <Tabs [page]="tagData.data.tabs.length" [tabBarUnderlineStyle]="tabBarUnderlineStyle" [swipeable]="false"
        [animated]="true" [useOnPan]="false" [tabBarActiveTextColor]="'#252629'" [tabBarTextStyle]="tabBarTextStyle"
        [activeTab]="tabPaneIndex" (onTabClick)="onClick($event)">
        <ng-container *ngFor="let item of tagData.data.tabs;let i=index;">
          <TabPane [title]="titleTemplate">
            <ng-template #titleTemplate>
              <ng-container *ngIf="i === tabPaneIndex; else elseUnCheckedTemplate">
                <div class="verticalBox">
                  <div id="slideLocation{{i}}" class="tab-checked normalTitle"
                    [ngStyle]="item?.checkValueCssStyle|styleFilter">
                    {{item.value}}</div>
                  <div [ngStyle]="item.checkSlideCssStyle|styleFilter" class="slideBox checkYellow"></div>
                </div>
              </ng-container>
              <ng-template #elseUnCheckedTemplate>
                <div class="verticalBox">
                  <div id="slideLocation{{i}}" class="normalTitle" [ngStyle]="item?.normalValueCssStyle|styleFilter">
                    {{item.value}}</div>
                  <div [ngStyle]="item.normalSlideCssStyle|styleFilter" class="slideBox"></div>
                </div>
              </ng-template>
              <span id="slideLocationHide{{i}}" appDebounceClick (debounceClick)="onHiddenElementClick(i)" class="hidden-span"></span>

            </ng-template>
          </TabPane>
        </ng-container>
      </Tabs>
    </div>

  </ng-template>
</ng-template>